<template>
    <div class="index">
        <Header/>
        <SideBar/>
        <!-- 路由匹配到的组件将显示在这里 -->
        <router-view></router-view>
    </div>
</template>

<script>
    import Header from './Header' //一个组件里面导入其他组件
    import SideBar from './SideBar'
    import MainContent from './MainContent'

    export default {
        name: 'Index',
        components:{//组件
            Header,
            SideBar,
            MainContent,
        }

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .index{
        margin-left: 150px;
        margin-right: 150px;
        padding: 0;
        min-width: 1200px;
    }

</style>
